<!--
 * @Descripttion: 首页组件
 * @Author: congz
 * @Date: 2020-06-04 11:22:40
 * @LastEditors: congz
 * @LastEditTime: 2020-08-12 21:20:08
-->

<template>
  <div class='home' id='home' name='home'>
    <!-- 轮播图 -->
    <el-card style='width: 80%;margin: auto'>
      <el-container>
        <el-aside width='400px'>
          <h2 class='h2'>分类</h2>
          <ul class='service-bd' role='menubar'>
            <li>
              <i class='el-icon-s-goods'></i>
              <a>女装</a><span class='service-slash'>/</span><a href='https://s.taobao.com/search?q=内衣' data-cid='1'
                                                                data-dataid='222890'
                                                                data-spm-anchor-id='a21bo.jianhua.201867-main.2'>内衣</a><span
              class='service-slash'>/</span> <a href='https://s.taobao.com/search?q=奢品' data-cid='1'
                                                data-dataid='222889'
                                                data-spm-anchor-id='a21bo.jianhua.201867-main.3'>奢品</a>
            </li>
            <li>
              <i class='el-icon-s-goods'></i>
              <a href='https://huodong.taobao.com/wow/a/act/tao/dailyact/2772/wupr?wh_pid=dailyAct-216657' data-cid='1'
                 data-spm-anchor-id='a21bo.jianhua.201867-main.4'>女鞋</a><span class='service-slash'>/</span><a
              href='https://s.taobao.com/search?q=%E7%94%B7%E9%9E%8B&amp;imgfile=&amp;commend=all&amp;ssid=s5-e&amp;search_type=item&amp;sourceId=tb.index&amp;spm=a21bo.2017.201856-taobao-item.1&amp;ie=utf8&amp;initiative_id=tbindexz_20170306'
              data-cid='1' data-dataid='222890' data-spm-anchor-id='a21bo.jianhua.201867-main.5'>男鞋</a><span
              class='service-slash'>/</span> <a
              href='https://s.taobao.com/search?q=%E7%AE%B1%E5%8C%85&amp;imgfile=&amp;commend=all&amp;ssid=s5-e&amp;search_type=item&amp;sourceId=tb.index&amp;spm=a21bo.21814703.201856-taobao-item.1&amp;ie=utf8&amp;initiative_id=tbindexz_20170306'
              data-cid='1' data-dataid='222889' data-spm-anchor-id='a21bo.jianhua.201867-main.6'>箱包</a>
            </li>

            <li>
              <i class='el-icon-s-goods'></i>
              <a href='https://s.taobao.com/search?q=美妆' data-cid='1'
                 data-spm-anchor-id='a21bo.jianhua.201867-main.7'>美妆</a><span class='service-slash'>/</span><a
              href='https://s.taobao.com/search?q=饰品' data-cid='1' data-dataid='222890'
              data-spm-anchor-id='a21bo.jianhua.201867-main.8'>饰品</a><span class='service-slash'>/</span> <a
              href='https://s.taobao.com/search?q=洗护' data-cid='1' data-dataid='222889'
              data-spm-anchor-id='a21bo.jianhua.201867-main.9'>洗护</a>
            </li>

            <li>
              <i class='el-icon-s-goods'></i>
              <a href='https://s.taobao.com/search?q=男装' data-cid='1'
                 data-spm-anchor-id='a21bo.jianhua.201867-main.10'>男装</a><span class='service-slash'>/</span><a
              href='https://s.taobao.com/search?q=运动' data-cid='1' data-dataid='222890'
              data-spm-anchor-id='a21bo.jianhua.201867-main.11'>运动</a><span class='service-slash'>/</span> <a
              href='https://s.taobao.com/search?q=百货' data-cid='1' data-dataid='222889'
              data-spm-anchor-id='a21bo.jianhua.201867-main.12'>百货</a>
            </li>

            <li>
              <i class='el-icon-s-goods'></i>
              <a href='https://s.taobao.com/search?q=手机' data-cid='1'
                 data-spm-anchor-id='a21bo.jianhua.201867-main.13'>手机</a><span class='service-slash'>/</span><a
              href='https://s.taobao.com/search?q=数码' data-cid='1' data-dataid='222890'
              data-spm-anchor-id='a21bo.jianhua.201867-main.14'>数码</a><span class='service-slash'>/</span> <a
              href='https://huodong.taobao.com/wow/a/act/tao/dailyact/5146/wupr?spm=a21bo.jianhua.201867-main.17.5af911d9ISdiw8&amp;wh_pid=dailyAct-265555&amp;v=2483e735cab1dcee499ab6218cd24e1c&amp;wh_random_str=1'
              data-cid='1' data-dataid='222889' data-spm-anchor-id='a21bo.jianhua.201867-main.15'>企业礼品</a>
            </li>

            <li>
              <i class='el-icon-s-goods'></i>
              <a href='https://s.taobao.com/search?q=家装' data-cid='1'
                 data-spm-anchor-id='a21bo.jianhua.201867-main.16'>家装</a><span class='service-slash'>/</span><a
              href='https://s.taobao.com/search?q=电器' data-cid='1' data-dataid='222890'
              data-spm-anchor-id='a21bo.jianhua.201867-main.17'>电器</a><span class='service-slash'>/</span> <a
              href='https://car.tmall.com/wow/car/act/carfp' data-cid='1' data-dataid='222889'
              data-spm-anchor-id='a21bo.jianhua.201867-main.18'>车品</a>
            </li>

            <li>
              <i class='el-icon-s-goods'></i>
              <a href='https://s.taobao.com/search?q=食品' data-cid='1'
                 data-spm-anchor-id='a21bo.jianhua.201867-main.19'>食品</a><span class='service-slash'>/</span><a
              href='https://s.taobao.com/search?q=生鲜' data-cid='1' data-dataid='222890'
              data-spm-anchor-id='a21bo.jianhua.201867-main.20'>生鲜</a><span class='service-slash'>/</span> <a
              href='https://s.taobao.com/search?ie=utf8&amp;initiative_id=staobaoz_20210219&amp;stats_click=search_radio_all%3A1&amp;js=1&amp;imgfile=&amp;q=%E6%AF%8D%E5%A9%B4&amp;suggest=history_1&amp;_input_charset=utf-8&amp;wq=%E6%AF%8D%E5%A9%B4&amp;suggest_query=%E6%AF%8D%E5%A9%B4&amp;source=suggest'
              data-cid='1' data-dataid='222889' data-spm-anchor-id='a21bo.jianhua.201867-main.21'>母婴</a>
            </li>

            <li>
              <i class='el-icon-s-goods'></i>
              <a href='https://s.taobao.com/search?q=医药' data-cid='1'
                 data-spm-anchor-id='a21bo.jianhua.201867-main.22'>医药</a><span class='service-slash'>/</span><a
              href='https://s.taobao.com/search?q=保健' data-cid='1' data-dataid='222890'
              data-spm-anchor-id='a21bo.jianhua.201867-main.23'>保健</a><span class='service-slash'>/</span> <a
              href='https://s.taobao.com/search?q=进口' data-cid='1' data-dataid='222889'
              data-spm-anchor-id='a21bo.jianhua.201867-main.24'>进口</a>
            </li>
          </ul>
        </el-aside>

        <el-container>
          <el-header>
            <el-tag type='info'>天猫</el-tag>
            <el-tag type='info'>聚划算</el-tag>
            <el-tag type='info'>天猫超市</el-tag>
            <el-tag type='info'>司法拍卖</el-tag>
            <el-tag type='info'>飞猪旅行</el-tag>
            <el-tag type='info'>天天特卖</el-tag>
          </el-header>
          <el-main>
            <div class='block'>
              <el-carousel height='466px'>
                <el-carousel-item v-for='item in carousels' :key='item.id'>
                  <router-link :to="{ path: '/goods/details', query: {productID:item.product_id} }">
                    <img style=' width: 100%;height: 100%' v-lazy='item.img_path' />
                  </router-link>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </el-card>
    <!-- 轮播图END -->

    <div class='main-box'>
      <div class='main'>
        <!-- 手机商品展示区域 -->
        <div class='phone'>
          <div class='box-hd'>
          </div>
          <div class='box-bd'>
            <div class='promo-list'>
              <router-link :to="{ path: '/goods/details', query: {productID:3026} }">
                <img :src="'http://101.132.181.9:3000/public/imgs/phone/phone.png'">
              </router-link>
            </div>
            <div class='list'>
              <MyList :list='phonesList' :isMore='true'></MyList>
            </div>
          </div>
        </div>
        <!-- 手机商品展示区域END -->

        <!-- 家电商品展示区域 -->
        <div class='appliance' id='promo-menu'>
          <div class='box-hd'>
            <div class='more' id='more'>
              <MyMenu :val='2' @fromChild='getChildMsg'>
                <span slot='1'>热门</span>
              </MyMenu>
            </div>
          </div>
          <div class='box-bd'>
            <div class='promo-list'>
              <ul>
                <router-link :to="{ path: '/goods/details', query: {productID:3030} }">
                  <li>
                    <img
                      :src="'https://p0.itc.cn/q_70/images01/20220812/9617fe9fc4ef43be867ee815074e8be4.jpeg'"
                    />
                  </li>
                </router-link>
                <router-link :to="{ path: '/goods/details', query: {productID:3032} }">
                  <li>
                    <img
                      :src="'https://m.360buyimg.com/babel/jfs/t1/122507/13/2914/157302/5eca8b01E9a9604a2/4b496801484d365b.jpg'"
                    />
                  </li>
                </router-link>
              </ul>
            </div>
            <div class='list' v-loading='loading'
                 element-loading-text='拼命加载中'
                 element-loading-spinner='el-icon-loading'
                 element-loading-background='#f2f2f2'
            >
              <MyList :list='applianceList' :isMore='true'></MyList>
            </div>
          </div>
        </div>
        <!-- 家电商品展示区域END -->

        <!-- 配件商品展示区域 -->

        <!-- 配件商品展示区域END -->
      </div>
    </div>
  </div>
</template>
<script>
import * as productsAPI from '@/api/products/'
import * as rankingAPI from '@/api/ranking/'

export default {
  data() {
    return {
      carousels: [
        {
          'id': 1,
          'product_id': 1,
          'img_path': 'https://www.concept-phones.com/wp-content/uploads/2022/09/iphone-15-ultra-render-1.jpg'
        }, {
          'id': 2,
          'product_id': 2,
          'img_path': 'https://p7.itc.cn/images01/20230103/4775edfdcff5437881403e3d063ad5e1.jpeg'
        }, {
          'id': 3,
          'product_id': 3,
          'img_path': 'https://p8.itc.cn/q_70/images03/20221029/227ba801b39e47af8ee99f5d15b1a25f.jpeg'
        }], // 轮播图数据
      // carousels: '', // 轮播图数据
      phonesList: [
        {
          'id': 1, 'name': 'Redmi K30', 'title': '120Hz流速屏，全速热爱',
          'img_path': 'https://imgservice.suning.cn/uimg1/b2c/image/6p7gGJV5nbWR8Z7zGZeDyQ.jpg_800w_800h_4e',
          'discount_price': 1599, 'price': 2000
        },
        {
          'id': 2, 'name': 'Redmi K30 5G', 'title': '双模5G,120Hz流速屏',
          'img_path': 'https://i5.walmartimages.com/asr/460d6206-4f35-433c-a10e-b74ef13decb6.2f0660eff7c0c08dfdc420856b9ca156.jpeg?odnWidth=1000&odnHeight=1000&odnBg=ffffff',
          'discount_price': 2599, 'price': 2599
        },
        {
          'id': 3, 'name': '小米CC9 Pro', 'title': '1亿像素,五摄四闪',
          'img_path': 'https://th.bing.com/th/id/OIP.iIln8DES8vhWazjcr3ZxVwHaHC?rs=1&pid=ImgDetMain',
          'discount_price': 2599, 'price': 2799
        },
        {
          'id': 4, 'name': 'Redmi 8', 'title': '5000mAh超长续航',
          'img_path': 'https://th.bing.com/th/id/OIP.7tVi3U6SMlmvXOsI7yUBsQHaHc?rs=1&pid=ImgDetMain',
          'discount_price': 699, 'price': 799
        },
        {
          'id': 5, 'name': 'Redmi 8A', 'title': '5000mAh超长续航',
          'img_path': 'https://imgservice.suning.cn/uimg1/b2c/image/6p7gGJV5nbWR8Z7zGZeDyQ.jpg_800w_800h_4e',
          'discount_price': 599, 'price': 699
        },
        {
          'id': 6, 'name': 'Redmi Note8 Pro', 'title': '6400万全场景四摄',
          'img_path': 'https://imgservice.suning.cn/uimg1/b2c/image/6p7gGJV5nbWR8Z7zGZeDyQ.jpg_800w_800h_4e',
          'discount_price': 1199, 'price': 1399
        },
        {
          'id': 7, 'name': 'Redmi Note8', 'title': '千元4800万四摄',
          'img_path': 'https://imgservice.suning.cn/uimg1/b2c/image/6p7gGJV5nbWR8Z7zGZeDyQ.jpg_800w_800h_4e',
          'discount_price': 999, 'price': 999
        }
      ], // 手机商品列表
      televisionsList: '', // 小米电视商品列表
      applianceList: '', // 家电商品列表
      applianceHotList: '', //热门家电商品列表
      accessoryList: '', //配件商品列表
      accessoryHotList: '', //热门配件商品列表
      phoneShellsList: '', // 保护套商品列表
      chargersList: '', //充电器商品列表
      applianceActive: 1, // 家电当前选中的商品分类
      accessoryActive: 1, // 配件当前选中的商品分类
      start: 0,
      limit: 7,
      loading: true
    }
  },
  watch: {
    // 家电当前选中的商品分类，响应不同的商品数据
    applianceActive: function(val) {
      // 页面初始化的时候把applianceHotList(热门家电商品列表)直接赋值给applianceList(家电商品列表)
      // 所以在切换商品列表时判断applianceHotList是否为空,为空则是第一次切换,把applianceList赋值给applianceHotList
      if (this.applianceHotList === '') {
        this.applianceHotList = this.applianceList
      }
      if (val === 1) {
        // 1为热门商品
        this.applianceList = this.applianceHotList
        return
      }
      if (val === 2) {
        // 2为电视商品
        this.applianceList = this.televisionsList
        return
      }
    },
    accessoryActive: function(val) {
      // 页面初始化的时候把accessoryHotList(热门配件商品列表)直接赋值给accessoryList(配件商品列表)
      // 所以在切换商品列表时判断accessoryHotList是否为空,为空则是第一次切换,把accessoryList赋值给accessoryHotList
      if (this.accessoryHotList == '') {
        this.accessoryHotList = this.accessoryList
      }
      if (val == 1) {
        // 1为热门商品
        this.accessoryList = this.accessoryHotList
        return
      }
      if (val == 2) {
        // 2为保护套商品
        this.accessoryList = this.phoneShellsList
        return
      }
      if (val == 3) {
        //3 为充电器商品
        this.accessoryList = this.chargersList
        return
      }
    }
  },
  activated() {
    // 获取首页数据
    this.load()
  },
  methods: {
    load() {
      let form = {
        user_id: this.$store.getters.getUser.id,
        num: 7
      }

      //获取热门家电
      rankingAPI
        .recommendGoods(form)
        .then(res => {
          if (res.status === 200) {
            this.applianceHotList = res.data.items
            this.applianceList = res.data.items
            this.loading = false
          } else {
            this.notifyError('获取热门失败')
          }
        })
        .catch(err => {
          this.notifyError('获取热门失败', err)
        })
      // //获取热门配件
      // rankingAPI
      //   .recommendGoods(form)
      //   .then(res => {
      //     if (res.status === 200) {
      //       this.accessoryHotList = res.data.items
      //       this.accessoryList = res.data.items
      //       this.loading = false
      //     } else {
      //       this.notifyError('获取热门失败')
      //     }
      //   })
      //   .catch(err => {
      //     this.notifyError('获取热门配失败', err)
      //   })
      //获取手机列表
      this.getProduct(0, 0, 'phonesList')
      // //获取电视列表
      this.getProduct(1, 3, 'televisionsList')
      // //获取保护套列表
      this.getProduct(2, 3, 'phoneShellsList')
      // //获取充电器列表
      this.getProduct(2, 3, 'chargersList')
    },
    // 获取家电模块子组件传过来的数据
    getChildMsg(val) {
      this.applianceActive = val
    },
    // 获取配件模块子组件传过来的数据
    getChildMsg2(val) {
      this.accessoryActive = val
    },
    // 获取各类商品数据方法封装
    getProduct(category_first_ID, category_second_ID, val) {
      productsAPI
        .listProducts(category_first_ID, category_second_ID, this.start, this.limit)
        .then(res => {
          if (res.status === 200) {
            this[val] = res.data.items
          } else {
            this.notifyError('获取失败', res.msg)
          }
        })
        .catch(err => {
          this.notifyError('获取失败', err)
        })
    }
  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#ffffff')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#f5f5f5')
    next()
  }
}
</script>
<style scoped>
@import '../assets/css/index.css';
</style>
